import Return2Icon from "@src/assets/return2.svg?react"
import {useNavigate} from "react-router-dom";
import {useRequest} from "ahooks";
import {
    usersFriendRequestsDataType,
    updateRelationship,
    createRelationship
} from "@src/services/userinfo.ts";
import {useEffect} from "react";
import Accordion from "@src/components/accordion";
import "./index.scss"
import {motion, AnimatePresence} from 'framer-motion';
import toast from 'react-hot-toast';
import InputIcon from "@src/components/inputIcon";
import SearchIcon from "@src/assets/search.svg?react"
import {newsDataCreate} from "@src/store/newsData"
import {socketCreate} from "@src/store/socket"
import {getUserInfo} from "@src/utils/userInfo.ts";

const itemVariants = {
    hidden: {opacity: 0, translateX: "0"}, // 初始状态：透明且从左侧偏移 300px
    visible: {opacity: 1, translateX: 0, transition: {duration: 0.3, ease: "easeInOut"}},
    exit: {opacity: 0, translateX: "125%", transition: {duration: 0.3}} // 退出状态：透明且向左偏移 300px
};
const AddFriends = () => {
    const navigate = useNavigate();
    const {socket} = socketCreate();
    const {
        friendRequest0,
        friendRequest1,
        myFriendRequest0,
        updateFriendRequest,
        updateMyFriendRequest,
        successFriend,
        setNewFriendRequestLength
    } = newsDataCreate()
    const {user} = getUserInfo()
    const updateRelationshipApi = useRequest(updateRelationship, {manual: true});
    const createRelationshipApi = useRequest(createRelationship, {manual: true});
    //通过好友验证
    const successFriends = (item: usersFriendRequestsDataType) => {
        successFriend(item)
        updateRelationshipApi.runAsync(item.user_id, item.friend_id, "1").then(() => {
            createRelationshipApi.runAsync(item.friend_id, item.user_id, "1").then(() => {
                updateMyFriendRequest()
            })
            toast.success("通过好友验证")
            socket.emit("private_message_hint", {
                recipientEmail: item.requester_email,
                message: `${user.name}通过了您的好友申请`
            })
        })
    }

    useEffect(() => {
        setNewFriendRequestLength(0)
        if (!friendRequest0 || !friendRequest1) {
            updateFriendRequest()
        }
        if (!myFriendRequest0) {
            updateMyFriendRequest()
        }
    }, []);

    return <div className="AddFriends">


        <div className="head centered">
            <Return2Icon onClick={() => navigate(-1)}></Return2Icon>
            <div>
                <h4 className="text-overflow-1">新朋友</h4>
            </div>
            <div className="head-text-btn" onClick={() => navigate("/home/news/searchUser")}>添加</div>
        </div>

        <div className="AddFriends-main">
            <InputIcon readOnly type="text" Icon={<SearchIcon></SearchIcon>}
                       placeholder="搜索好友" onClick={() => navigate("/home/news/searchUser")}>
            </InputIcon>

            <div className="card">
                <Accordion title="待验证好友申请" rightTitle={friendRequest0?.length} active={true}>
                    <ul>
                        <AnimatePresence>
                            {friendRequest0?.map((item) =>
                                <motion.li
                                    key={item.requester_email}
                                    className="news-li"
                                    variants={itemVariants} // 使用定义好的动画变体
                                    initial="hidden" // 初始状态
                                    animate="visible" // 动画进入状态
                                    exit="exit" // 动画退出状态
                                >
                                    <div>
                                        <img className="userHead" src={item.requester_avatar} alt=""/>
                                    </div>
                                    <div>
                                        <div>
                                            <h4 className="text-overflow-1">{item.requester_name}</h4>
                                            <p></p>
                                        </div>
                                        <div>
                                            <p className="text-overflow-1">{item.requester_email}</p>
                                        </div>
                                    </div>
                                    <button className="z-button z-button-success"
                                            onClick={() => successFriends(item)}>通过
                                    </button>
                                </motion.li>
                            )}
                        </AnimatePresence>
                    </ul>
                </Accordion>
            </div>

            <div className="card">
                <Accordion title="已发送好友申请" rightTitle={myFriendRequest0?.length} active={true}>
                    <ul>
                        <AnimatePresence>
                            {myFriendRequest0?.map((item) =>
                                <motion.li
                                    key={item.friend_email}
                                    className="news-li"
                                    variants={itemVariants} // 使用定义好的动画变体
                                    initial="hidden" // 初始状态
                                    animate="visible" // 动画进入状态
                                    exit="exit" // 动画退出状态
                                >
                                    <div>
                                        <img className="userHead" src={item.friend_avatar} alt=""/>
                                    </div>
                                    <div>
                                        <div>
                                            <h4 className="text-overflow-1">{item.friend_name}</h4>
                                            <p></p>
                                        </div>
                                        <div>
                                            <p className="text-overflow-1">{item.friend_email}</p>
                                        </div>
                                    </div>
                                    <button disabled className="z-button z-button-warning">待通过</button>
                                </motion.li>)}
                        </AnimatePresence>
                    </ul>
                </Accordion>
            </div>

            <div className="card">
                <Accordion title="已通过好友申请" rightTitle={friendRequest1?.length} active={true}>
                    <ul>
                        <AnimatePresence>
                            {friendRequest1?.map((item) =>
                                <motion.li
                                    key={item.requester_email}
                                    className="news-li"
                                    variants={itemVariants} // 使用定义好的动画变体
                                    initial="hidden" // 初始状态
                                    animate="visible" // 动画进入状态
                                    exit="exit" // 动画退出状态
                                >
                                    <div>
                                        <img className="userHead" src={item.requester_avatar} alt=""/>
                                    </div>
                                    <div>
                                        <div>
                                            <h4 className="text-overflow-1">{item.requester_name}</h4>
                                            <p></p>
                                        </div>
                                        <div>
                                            <p className="text-overflow-1">{item.requester_email}</p>
                                        </div>
                                    </div>
                                    <button disabled className="z-button z-button-info">已通过</button>
                                </motion.li>)}
                        </AnimatePresence>
                    </ul>
                </Accordion>
            </div>
        </div>
    </div>
}
export default AddFriends;